<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="/static/favicon.ico" sizes="32*32">
    <link rel="stylesheet" type="text/css" href="/static/register/sass/JD1.css"/>
    <link rel="stylesheet" type="text/css" href="/static/register/sass/register.css"/>
    <script src="/static/register/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
    <title>NC_EOS</title>
</head>

<body class="bs">
<div class="d1 t2">
    <h3>
        <a class="c" href="/logout">退出登录</a>
    </h3>
</div>
<div class="d1 t1">
    <h3>
        <a class="c" href="/index">返回主页</a>
    </h3>
</div>
<div class="top-3">
    <div id="sign">
        <div class="si_top">
            <p>
                <span style="color:red;" th:if="${session.msg!=null}"><br/>[[${session.msg}]]</span>
            </p>
        </div>
        <div class="si_cen">
            <h2 class="act">添加新用户</h2>
        </div>
        <div class="si_bom1 tab" style="display: none;">
            <div class="error">
                <div></div>
                请输入账户名和密码
            </div>
            <form action="/register" method="post" onsubmit="return register()">
                <ul>
                    <div class="ermsg" style="color: red"
                         th:text="${errors!=null? (#maps.containsKey(errors, 'msg')?errors.msg:''):''}">
                    </div>
                    <li class="top_1">
                        <img src="/static/register/img/user_03.png" class="err_img1"/>
                        <input type="text" name="username" placeholder=" 用户名/手机号" class="user"/>
                    </li>
                    <li>
                        <img src="/static/register/img/user_06.png" class="err_img2"/>
                        <input type="password" name="password" placeholder=" 密码" class="password"/>
                    </li>
                    <li>
                        <img src="/static/register/img/user_06.png" class="err_img2"/>
                        <input type="password" name="passwordc" placeholder="确认密码" class="password"/>
                    </li>
                    <li>
                        <img src="/static/register/img/user_06.png" class="err_img1"/>
                        <p class="selectp">
                            <select name="cover" data-options="editable:false,required:true">
                                <option value="1" >覆盖</option>
                                <option value="0" selected>仅添加</option>
                            </select>
                        </p>
                    </li>
                    <li class="ent">
                        <button class="btn2" type="submit"><a class="a">添 &nbsp; &nbsp;加</a></button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var alDiv = document.getElementsByClassName('tab');
    var alBtn = document.getElementsByTagName('h2');
    alDiv[0].style.display = 'block';
    var act = alBtn[0]
    for (var i = 0; i < alBtn.length; i++) {
        alBtn[i].indent = i;
        alBtn[i].onclick = function () {
            act.className = '';
            alDiv[act.indent].style.display = 'none';
            this.className = 'act'
            alDiv[this.indent].style.display = 'block'
            act = this
        }
    }

    var btn2 = document.getElementsByClassName('btn2')[0];
    var user = document.getElementsByClassName('user')[0];
    var pass = document.getElementsByClassName('password')[0];
    var passc = document.getElementsByClassName('passwordc')[0];
    var err = document.getElementsByClassName('error')[0];
    var err_img1 = document.getElementsByClassName('err_img1')[0];
    var err_img2 = document.getElementsByClassName('err_img2')[0];
    var err_img3 = document.getElementsByClassName('err_img2')[1];
    var err_img4 = document.getElementsByClassName('err_img1')[1];

    function register(){
        if (user.value == '' || pass.value == '' || passc != pass) {
            err.style.display = 'block';
            user.style.border = '1px solid red';
            pass.style.border = '1px solid red';
            err_img1.src = '/static/register/img/img11.png';
            err_img2.src = '/static/register/img/img22.png';
            err_img3.src = '/static/register/img/img22.png';
            err_img4.src = '/static/register/img/img11.png';
            return false;

        }
        return true;
    }
    btn2.onclick = function () {
        if (user.value == '' || pass.value == '' || passc != pass) {
            err.style.display = 'block';
            user.style.border = '1px solid red';
            pass.style.border = '1px solid red';
            err_img1.src = '/static/register/img/img11.png';
            err_img2.src = '/static/register/img/img22.png';
        } else {
            // var a = document.getElementsByClassName("a")[0].href = "http://g2p.com/login";
        }
        user.onfocus = function () {
            err_img1.src = '/static/register/img/grow1.png';
            user.style.border = '1px solid #999';
        }
        pass.onfocus = function () {
            err_img2.src = '/static/register/img/grow2.png';
            pass.style.border = '1px solid #999';
        }
        user.onblur = function () {
            err_img1.src = '/static/register/img/img11.png';
            user.style.border = '1px solid red';
        }
        pass.onblur = function () {
            err_img2.src = '/static/register/img/img22.png';
            pass.style.border = '1px solid red';
        }
    }
</script>

</html>